آموزش طراحي قالب وب سايت و وبلاگ به وسيله CSS (قسمت سوم)

در ادامه آموزش طراحی وب سايت  استاندارد به کمک css امروز يک نوع صفحه پايه ي طراحي css که فارسي شده و براي نوشتن مطالب فارسي مناسب مي باشد را براي دانلود در اختيارتان قرار ميدهم. با کليک روي تصوير پايين، آن را دانلود و کار را آغاز کنيد.

دانلود قالب فارسي براي طراحی وب سايت  css

فايلي را که دانلود کرده ايد يک فايل zip. است که بعد از extract شدن (خارج شدن از حالت zip ) فولدري را در اختيارتان قرار ميدهد که حاوي سه فايل ميباشد:

2-column.htm

reset.css

styles.css

فايل اول با پسوند htm. همان صفحه اصلي است که در طراحی وب سايت  به نمايش در مي آيد. فايل دوم فايل reset.css است لطفا براي دريافت اطلاعات در اين مورد به اين اينجا مراجعه کنيد. فايل سوم فايل style.css است که به صفحه htm. دستور ميدهد که چگونه محتوياتش را نمايش دهد.

 طراحی وب سايت

صفحه htm. و styles.css را که دانلود کرده ايد در يک ويرايشگر صفحه وب مانند frontpage باز کنيد. در حال حاضر صفحه اي مانند تصوير زير را در اختيار داريد که براي سهولت در ارائه توضيحات، ستونها را با خطوط (border) کاملا واضح مشخص کرده ام.

تصوير قالب دو ستونه براي طراحی وب سايت  css

همان طور که قبلا هم توضيح دادم قالبهايي را که مثلا دو ستونه مي ناميم مانند قالبي که هم اکنون براي کار در دست داريد ظاهرا دو ستونه است ولي در اصل با چندين ستون سرو کار داريم. در اين قالب پنج ستون داريم که با تغييرات در ظاهر آنها ميتوانيم به آنچه در نظر داريم نزديک شده و طرح مورد نظرمان را اعمال کنيم.

 طراحی وب سايت

اکنون به فايل styles.css نگاهي مي اندازيم. براي اين که به اهميت اين فايل بيشتر پي ببريد ابتدا فايل htm. را در مروگر مشاهده کنيد سپس فايل styles.css را از درون فولدر، delete کرده و مجددا فايل htm. را مشاهده کنيد (اگر صفحه شما در مرورگر باز است آن را refresh کنيد تا تغيرات را ببينيد). براي اطلاعات بيشتر در مورد محتويات styles.css اجزاي آن را بررسي ميکنيم:

شما در اين فايل نوشته هايي را مشاهده ميکنيد که هر کدام مربوط به يک ستون مي باشد در ابتدا بايد بدانيد که اسامي ستونها در فايل styles.css با علامت # مشخص ميشوند. مثلا: wrapper# در فايل styles.css که در اختيار داريد چگونگي نمايش ستون wrapper را در صفحه htm. مشخص ميکند. کدهاي HTML صفحه htm. را در ويرايشگر طراحی وب سايت  خود مرور کنيد و نام wrapper را بيابيد. اين ستون، ظرف يا قالب اصلي کار شماست که در صفحه htm. آن را براي شما با border قرمز مشخص کرده ام و بقيه ستونها مانند قطعات پازل در آن جاي ميگيرند.

#wrapper {

margin: auto;

direction: rtl;

width: 922px;

border: 1px solid #FF0000;

}

 طراحی وب سايت

نوشته هايي که در ميان دو علامت { } قرار دارند و زير نام يک ستون قرار ميگيرند دستوارتي هستند که نحوه نمايش آن ستون را اعمال ميکنند. همان طور که در دستور بالا که قسمتي از فايل styles.css شماست و متعلق به ستون wrapper ميباشد مشاهده ميکنيد به اين ستون دستور داده شده تا به حالت اتوماتيک (خودکار) در صفحه جاي بگيرد ( ;margin: auto )،

نوشته هاي درون آن از حالت نوشتاري راست به چپ پيروي کنند که براي نوشتار و تايپ فارسي مناسب است ( ;direction: rtl ) منظور از مقدار rtl که در مقابل کلمه direction نوشته شده همان right to left يا چپ به راست است،

عرض آن 922 پيکسل باشد ( ;width: 922px ) و

اطراف آن را يک خط ممتد با ضخامت 1 پيکسل و رنگ قرمز احاطه کند ( ;border: 1px solid #FF0000 ).

اکنون دستورات ستون ديگري طراحی وب سايت را مرور ميکنيم تا کدهاي جديدتري را پيدا کنيم. در فايل styles.css به دنبال ستون leftcolumn بگرديد دستورات اين ستون را در قسمت پايين مشاهده ميکنيد:

#leftcolumn {

border: 1px solid #000000;

background:#FFFFFF;

margin: 0px 0px 5px 0px;

padding: 10px;

height: 350px;

width: 204px;

float: right;

}

کدهاي جديدي طراحی وب سايت  که در اين قسمت مشاهده ميکنيد عبارت است از: background و padding و height و float .

اين کدها به ستون leftcolumn  دستور ميدهند که:

رنگ پس زمينه اش سفيد باشد ( ;background:#FFFFFF )،

فاصله محتويات درونش مانند تصاوير عکسها و ... از اطراف 10 پيکسل باشد ( ;padding: 10px )،

 طراحی وب سايت

ارتفاع آن 350 پيکسل باشد ( ;height: 350px ) و

جايگاه قرار گرفتنش در صفحه سمت راست باشد ( ;float: right ).

شما ميتوانيد با تغيير اندازه width (عرض) ستون wrapper و ستونهاي داخل آن شکل قالب را کاملا تغيير دهيد. قصد دارم چند طرح را مشخص کنم تا افرادي که اين سري آموزشي را دنبال ميکنند براي تمرين از آن طرح ها به عنوان الگو استفاده کنند.

 طراحی وب سايت

براي تمرين، اندازه عرض ستونها را تغيير دهيد درست کردن قالبهايي به شکل زير را تمرين کنيد تغييرات در کدهاي اصلي را در قسمت بعد آموزش ميدهم.

طراحی وب سايت ساده  با CSS,HTML

    امروز تصميم به طراحی وب سايت  سايت گرفتم ولي نه به عنوان نمونه کار بلکه براي آموزش ، من اين کار رو از الف شروع مي کنم و همراه طراحي به توضيحات در مورد نکات مهم که تو اين تالار مشکل عمده افراد هست مي پردازم ، اين آموزش براي افرادي مفيد خواهد بودکه دوست دارند طراحي با استفاده از استانداردهاي جهاني انجام بدهند ، به دليل کمي وقت اضافه من سعي دارم اين وب سايت رو در پروسه زماني 1 هفته اي براي دوستان عزيز کامل کنم ودر اين اين هروز يک قسمت از اين طرح رو طراحی وب سايت  و کد نويسي مي کنيم ، پيشنهادم براي کساني که تمايل دارند به خوبي ياد بگيرند هر روز همراه با من شروع به طراحي مجدد اين سايت کنند در اين آموزش فرض بر آن است که کاربران عزيز مختصر در مورد html,css آشنايي دارند کد نويسي در اين آموزش بسيار ساده و قابل درک خواهد بود.

c